<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
</head>
<body>

<div id="app">
    <div>新增评论:</div>
    <div>
        <textarea name="content" v-model="content"  cols="30" rows="5" style="font-size: 20px"></textarea><br/>
        <button @click="doSubmit" style="font-size: 20px">提交</button>
    </div>
    <div style="margin-top: 10px">
        <review ref="topReviewLevel"></review>
    </div>
</div>
<template id="review-template">
    <div class="review" v-for="review in reviewData.items">
        <div class="review-date">{{longToDate(review.createDate)}}</div>
        <div class="review-content">{{review.content}}</div>
        <textarea v-if="review.showTextbox" v-model="review.replied"  cols="30" rows="5" style="font-size: 15px"></textarea>
        <button v-if="review.showTextbox" @click="doSubmit(review)">提交</button>
        <button v-if="review.showTextbox" @click="review.showTextbox=0">取消</button>
        <button v-if="!review.showTextbox" @click="review.showTextbox=1">回复</button>
        <button @click="removeReview(review.id)">删除</button>
        <review v-if="review.showSub" :ref="review.id" :parent-id="review.id"></review>
        <button class="review-more" v-if="review.subCount > 0 && !review.showSub" @click="review.showSub=true">查看子评论</button>
    </div>
    <button v-if="havingNextPage(reviewData)" @click="query(reviewData)">更多评论</button>
</template>
<style>
    .review {
        border-left: 1px solid lightgrey;
        font-size: 20px;
        padding: 0 10px;
        margin-bottom: 10px;
    }
    .review button {
        margin-left: 10px;
    }
    .review-more {
        font-size: 10px;
        cursor: pointer;
    }
</style>
<script>
    const { createApp, ref } = Vue;
    const REVIEW_API = '/reviews';
    axios.defaults.baseURL = 'http://127.0.0.1:8080/api';
    //添加拦截器
    axios.interceptors.response.use(function (response) {
        if (response.data.code !== 200) {
            alert(response.data.msg);
            return Promise.reject(response.data);
        }
        return response.data.data;
    }, function (error) {
        alert(error.message);
        return Promise.reject(error);
    });
    const reviewComponent = {
        template: '#review-template',
        props: ['parentId'],
        data() {
            return {
                content: '',
                reviewData: {items:[]},
            }
        },

        methods: {
            removeReview(id) {
                axios.delete(REVIEW_API + "/" + id).then(resp=>{
                    const idx = this.reviewData.items.findIndex(item=>item.id === id);
                    this.reviewData.items.splice(idx, 1);
                });
            },
            addReviewItem(review) {  //前端直接先把新增的评论缓存下来
                this.reviewData.items.unshift(review);
            },
            longToDate(date) {
                return dayjs(Number.parseFloat(date)).format("YYYY-MM-DD HH:mm:ss");
            },
            havingNextPage(review) { //判断是否还有下一页数据
                const pageData = review.pageData;
                if (pageData) {
                    return pageData.cur < pageData.total;
                }
                return review.subCount;
            },
            doSubmit(parent) {  //提交一个新的评论
                axios.post(REVIEW_API, {parentId:parent.id, content:parent.replied}).then(resp=>{
                    parent.showSub = 1;
                    parent.showTextbox = 0;
                    parent.replied = null;
                    if (this.$refs[parent.id]) {
                        this.$refs[parent.id][0].addReviewItem(resp);
                    }
                });
            },
            query(parentReview) {
                let pageParams = parentReview.pageData;
                if (!pageParams) {
                    pageParams = parentReview.pageData = {cur:0, size: 10, total: 0};
                }

                axios.get(REVIEW_API, {
                    params:{page_num:pageParams.cur+1, page_size:pageParams.size, parent_id:this.parentId}
                }).then(pageData=>{
                    pageParams.cur++;
                    pageParams.total = pageData.pages;
                    parentReview.items.push(...pageData.records);
                });
            },
        },
        mounted() {
            //每次渲染一个新的组件时，就会动态加载子评论
            this.query(this.reviewData)
        }
    };
    const app = createApp({
        data() {
            return {
                content: '',
            }
        },
        methods: {
            doSubmit() {
                axios.post(REVIEW_API, {content:this.content}).then(resp=>{
                    this.$refs.topReviewLevel.addReviewItem(resp)
                    this.content = '';
                });
            },
        }
    });
    //使用子组件，为了能递归渲染评论
    app.component('review', reviewComponent);
    app.mount('#app');

</script>
</body>
</html>